<template>
  <view class="container">
	<xk-header :headerbg="true" class="header" :back="true" title="楼层洗手间"></xk-header>
	<view class="top-localtion">
		<u-row >
			<u-col span="7">
				所在楼层选择
			</u-col>
			<u-col span="5">
				<u-button @click="showPk = true" size="small">{{xuanname}} <u-icon name="arrow-down" color="#2979ff" size="14" customStyle="margin-left:5px;"></u-icon></u-button>
			</u-col>
		</u-row>
		<u-picker :show="showPk" :columns="columns" @confirm="confirmPk" @cancel="showPk =false" @change="changeHandler"></u-picker>
	</view>

	<view class="box1">
	<u-row >
		<u-col span="5">
			<u-row >
				<u-col span="5">
					<view class="sexbox"><image class="sexicon" mode="widthFix" :src="(imgUrl+'/wx/male.png')" ></image></view>
				</u-col>
				<u-col span="7" textAlign="left">
					<view class="kongxian">空闲：{{toiletList.manyou}}个</view>
					<view class="zhanwei">占位：{{toiletList.manwu}}个</view>
				</u-col>
			</u-row>
		</u-col>
		<u-col span="1" offset="1"><view class="lineheight">1</view></u-col>
		<u-col span="5">
			<u-row >
				<u-col span="4">
					<view class="sexbox"><image class="sexicon" mode="widthFix" :src="(imgUrl+'/wx/female.png')" ></image></view>
				</u-col>
				<u-col span="8" textAlign="left">
					<view class="kongxian">空闲：{{toiletList.nvyou}}个</view>
					<view class="zhanwei">占位：{{toiletList.nvwu}}个</view>
				</u-col>
			</u-row>
		</u-col>
	</u-row>
	</view>

	<view class="tabsbox">
		<u-subsection
		:list="list"
		:current="current"
		@change="sectionChange"
		activeColor="#379CFF"
		inactiveColor="#BCB6B6"
		:customStyle="{'border-radius':'40rpx','height':'70rpx','border':'1px solid #379CFF'}"
		fontSize="14"
		mode="subsection"
		:bold="false"
		></u-subsection>
	</view>
	<view style="margin:20rpx;">
		<u-grid
			:border="false"
			col="3"
		>
			<u-grid-item
				v-for="(listItem,listIndex) in listData"
				:key="listIndex"
			>
			<view class="box5">
				<view :class="'textbox '+ (listItem.status>1?'greycolor':'')"><text class="shuzi-text">{{listItem.title}}</text><text class="haotext">号</text></view>
				<view :class="'textcolor'+listItem.status">{{listItem.name}}</view>
			</view>
			</u-grid-item>
		</u-grid>
	</view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  /* import { setCartTabBadge } from '@/core/app'
  import * as Api from '@/api/page'
  import Page from '@/components/page' */

  const App = getApp()

  export default {
    components: {},
    data() {
      return {
		imgUrl:this.$config.BASE_imgUrl,
        // 页面参数
        options: {},
        // 页面属性
        page: {},
        // 页面元素
        items: [],
		xuanvalue:0,
		xuanname:'主楼 - F1层',
		showPk:false,
		columns: [
			['主楼', '副楼'],
			['F1层', 'F2层', 'F3层', 'F4层', 'F5层', 'F6层', 'F7层', 'F8层', 'F9层', 'F10层', 'F11层', 'F12层'],
		],
		columnData: [
			['F1层', 'F2层', 'F3层', 'F4层', 'F5层', 'F6层', 'F7层', 'F8层', 'F9层', 'F10层', 'F11层', 'F12层'],
			['F1层', 'F2层', 'F3层', 'F4层'],
		],
		toiletList:{name:'1楼',sex:'男',manyou:4,manwu:4,sex2:'女',nvyou:4,nvwu:2},
		list: ['男厕', '女厕'],
		current:0,
		listData: [{
			name: '空闲',
			status:1,
			title: '1'
			},
			{
				name: '空闲',
				status:1,
				title: '2'
			},
			{
				name: '占用',
				status:3,
				title: '3'
			},
			{
				name: '占用',
				status:3,
				title: '4'
			},
			{
				name: '异常',
				status:2,
				title: '5'
			},
			{
				name: '空闲',
				status:1,
				title: '6'
			},
			{
				name: '异常',
				status:2,
				title: '7'
			},
			{
				name: '空闲',
				status:1,
				title: '8'
			},
		],
		demoData0: [{
			name: '空闲',
			status:1,
			title: '1'
			},
			{
				name: '空闲',
				status:1,
				title: '2'
			},
			{
				name: '占用',
				status:3,
				title: '3'
			},
			{
				name: '占用',
				status:3,
				title: '4'
			},
			{
				name: '异常',
				status:2,
				title: '5'
			},
			{
				name: '空闲',
				status:1,
				title: '6'
			},
			{
				name: '异常',
				status:2,
				title: '7'
			},
			{
				name: '空闲',
				status:1,
				title: '8'
			},
		],
		demoData1: [{
			name: '异常',
			status:2,
			title: '1'
			},

			{
				name: '占用',
				status:3,
				title: '2'
			},
			{
				name: '空闲',
				status:1,
				title: '3'
			},
			{
				name: '空闲',
				status:1,
				title: '4'
			},
			{
				name: '空闲',
				status:1,
				title: '5'
			},
			{
				name: '空闲',
				status:1,
				title: '6'
			},
		],
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
      // 加载页面数据
      //this.getPageData();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
    },

    methods: {
	 changeHandler(e) {
			 const {
				 columnIndex,
				 value,
				 values, // values为当前变化列的数组内容
				 index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				 picker = this.$refs.uPicker
			 } = e
			 // 当第一列值发生变化时，变化第二列(后一列)对应的选项
			 if (columnIndex === 0) {
				 // picker为选择器this实例，变化第二列对应的选项
				 picker.setColumnValues(1, this.columnData[index])
			 }
		 },
	  sectionChange(index) {
		//console.log(index)
		this.current = index;
		if(index==0){
			this.listData=this.demoData0;
		}else{
			this.listData=this.demoData1;
		}
	  },
	  confirmPk(e){
		//console.log('confirm', e)
		this.xuanname=e.value[0]+' - '+e.value[1]
		 this.showPk=false;
		 this.$refs.uToast.show({
			type: 'loading',
			title: '正在加载',
			message: "正在加载",
			duration:1000,
		 });
	  },
      /**
       * 加载页面数据
       * @param {Object} callback
       */
      getPageData(callback) {
        const app = this
        const pageId = app.options.pageId || 0
        Api.detail(pageId)
          .then(result => {
            // 设置页面数据
            const { data: { pageData } } = result
            app.page = pageData.page
            app.items = pageData.items
            // 设置顶部导航栏栏
            app.setPageBar();
          })
          .finally(() => callback && callback())
      },

      /**
       * 设置顶部导航栏
       */
      setPageBar() {
        const {
          page
        } = this
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: page.params.title
        });
        // 设置navbar标题、颜色
        uni.setNavigationBarColor({
          frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
          backgroundColor: page.style.titleBackgroundColor
        })
      },

    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取首页数据
      this.getPageData(() => {
        uni.stopPullDownRefresh()
      })
    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
   page{
		background:#F5F5F5!important;
	}
  .container {
    background: #F5F5F5;
  }
  .top-localtion{
	  margin:30rpx 30rpx 0 30rpx;
	  background:#FFFFFF;
	  padding:20rpx 30rpx 20rpx 30rpx;
	  border-radius:12rpx;
	  box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	  .dwtext{
		  margin-left:10rpx;
		  color: #101010;
		  font-size:28rpx;
	  }
  }
  .box1{
	 background:#FFFFFF;
	 text-align:center;
	 padding:10rpx 0 20rpx 0;
	 margin:30rpx;
	 font-size:24rpx;
	 border-radius:20rpx;
	 box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	 border:#F1F1F1 1px solid;
  }
  .box5{
  	 background:#FFFFFF;
	 height:120px;
  	 text-align:center;
	 margin:10rpx 20rpx 10rpx 20rpx;
	 font-size:32rpx;
	 border-radius:20rpx;
	 vertical-align: middle;
	 box-shadow: 4px 4px 8px 0px rgba(240, 239, 244, 100);
	 width:90%;
	 .textbox{
		 margin-top:50rpx;
		 margin-bottom:30rpx;
	 }
	 .shuzi-text{
		margin-left:20rpx;
		font-size:60rpx;
	 }
	 .hao-text{
	 	margin-left:20rpx;
		font-size:40rpx;
	 }
	 .textcolor1{
	 	color: #05B61D;
		font-size:24rpx;
	 }
	 .textcolor3{
	 	color: #BBBBBB;
		font-size:24rpx;
	 }
	 .textcolor2{
	 	color: #E21111;
		font-size:24rpx;
	 }
	 .greycolor{
		 color:#ccc;
	 }
  }
  .iconbox{
	  width:120rpx;
	  height:120rpx;
  }
  .box0{
	  margin:30rpx 0 30rpx 30rpx;
	  width:44%;
	  float: left;
  }
  .title1{
	  text-align:center;
	  padding:10px;
	  font-weight:bold;
  }
  .title2{
	  text-align:center;
	  margin-left:100rpx;
  }
  .title3{
	  font-size:60rpx;
	  padding:50rpx 0 50rpx 0;
  }
  .title4{
  	  font-size:24rpx;
	  color:#666;
  }
  .title5{
  	  font-size:24rpx;
	  color:#666;
  }
  .color0{
	  color:#80C088;
  }
  .color1{
  	  color:#101010;
  }
  .color2{
  	  color:#101010;
  }
  .color3{
  	  color:#E0CE31;
  }
  .loutitlebox{
	  border-bottom:1px solid #F5F5F5;
	  margin:0rpx 30rpx 0rpx 30rpx;
	  padding-bottom:10rpx;
  }
  .lineheight{
	  height:120rpx;
	  width:100%;
	  color:#FFFFFF;
	  border-left:1px solid #F5F5F5;
	  margin:20rpx auto 0 auto;
  }
  .louinfo{
	  display:flex;
	  margin-left:10rpx;
	  font-size:28rpx;
  }
  .louicon{
	  width:40rpx;
	  height:40rpx;
  }
  .sexbox{
	  text-align:center;
  }
  .sexicon{
	  width:50rpx;
	  height:50rpx;
  }
  .kongxian{
	  color:#05B61D;
	  font-size:26rpx;
  }
  .zhanwei{
	  color:#BCB6B6;
	  margin-top:12rpx;
	  font-size:26rpx;
  }
  .loadtext{
	  text-align:center;
	  padding:30rpx 0 50rpx 0;
	  font-size:24rpx;
	  color: #999;
  }
  .tabsbox{
	  margin:20rpx 60rpx 20rpx 60rpx;
  }
</style>
